<template>
	<view class="comment__detail">
		<view class="flex-x comment__head">
			<view class="item12-8 flex-x middle">
				<image :src="head" mode="aspectFill">
				<text>{{name}}</text>
				<i 
					v-for="item in levelList"
					:style="{
						color: (item === 1 ? '#FFBA00' : '#999999')
					}"
					class="iconfont iconshoucang">
				</i>
			</view>
			<view class="item12-4 flex-x right middle">
				<text>{{time}}</text>
			</view>
		</view>
		
		<view class="flex-y comment__middle">
			<text>{{comment}}</text>
			<view v-show="images" class="comment__image">
				<image v-for="(item) in images" :src="item.path" mode="aspectFill"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				levelList: []
			}
		} ,
		created() {
			for(let i=0;i<5;i++) {
				this.levelList.push((i >= parseInt(this.level) ? 0 : 1))
			}
		} ,
		props: {
			level: {
				type: Number ,
				default: '2'
			} ,
			head: String ,
			name: String ,
			time: String ,
			comment: String ,
			images: Array ,
		}
	}
</script>

<style>
	.comment__detail {
		border-top: 2rpx solid #CDCDCD;
		padding: 30rpx 30rpx 0;
	}
	
	.comment__detail:last-child {
		border-bottom: 2rpx solid #CDCDCD;
	}
	
	.comment__detail .comment__head image{
		width: 56rpx;
		height: 56rpx;
		border-radius: 100%;
	}
	
	.comment__detail .comment__head text{
		color: #999999;
		font-size: 24rpx;
		margin: 0 30rpx;
	}
	
	.comment__middle {
		margin: 30rpx 0;
	}
	
	.comment__middle text {
		font-size: 24rpx;
	}
	
	.comment__image {
		margin: 30rpx 0 20rpx 0;
	}
	
	.comment__image image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 30rpx;
	}
</style>
